<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<div th:replace="common/top"/>

<div id="Content">

    <div id="Catalog">
<!--        <form action="/account/login_confirm" method="post">-->
<!--            <p>Please enter your username and password.</p>-->
<!--            <p>-->
<!--                Username:<input type="text" th:name="username" />-->
<!--                <br/>-->
<!--                Password:<input type="password" th:name="password"/>-->
<!--                <br/>-->
<!--            <div class="g-recaptcha" data-sitekey="6LezCeYUAAAAAGFHT6vloDsIiC4IgAIiTjEPIpCy"></div>-->
<!--            <br/>-->
<!--            </p>-->


<!--            <input type="submit" value="Login"/>-->
<!--        </form>-->
        <section class="pricing" >
            <div class="row pricing-content">
                <div class="col-four pricing-intro">
        <form action="/account/login_confirm" method="post">
            <font size="3" color="red">请登录</font>
            <table>
                <tr>
                    <td></td>
                    <td><input type="text" name="username" autocomplete="off" placeholder="用户名"/></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="password" name="password" placeholder="密码"/></td>
                </tr>
<!--                <tr>-->
<!--                    <td></td>-->
<!--                   <td><input type="email" class="radius" name="email" id="emailAd"  placeholder="邮箱"></td>-->
<!--                    <td><button type="button" onclick="sendMessage()" id="sendCode" class="btn btn-primary">免费获取验证码</button></td>-->
<!--                </tr>-->

<!--                <tr>-->
<!--                    <td></td>-->
<!--                    <td><input type="text" class="radius" id="code" name="code"  placeholder="验证码"></td>-->
<!--                </tr>-->
            </table>

            <input type="submit" class="button button-primary large"  value="Login" />
        </form>
        Need a user name and password?<a href="/account/register" th:text="register"></a>
    </div>
</div>
        </section>

<div th:replace="common/bottom"/>
<!--<script>-->
<!--    let form = document.querySelector("#Catalog>form");-->
<!--    form.addEventListener("submit", e => {-->
<!--        e.preventDefault();-->
<!--        // let data = new FormData();-->
<!--        // let inputs = form.querySelectorAll("input[type=\"text\"], input[type=\"password\"]");-->
<!--        if (!grecaptcha.getResponse()) {-->
<!--            alert("Please fill in the captcha.");-->
<!--            return;-->
<!--        } else {-->
<!--            fetch("/account/captcha", {-->
<!--                method: 'POST',-->
<!--                headers: {-->
<!--                    'content-type': 'application/json'-->
<!--                },-->
<!--                body: JSON.stringify({-->
<!--                    google_recaptcha_token: grecaptcha.getResponse()-->
<!--                })-->
<!--            }).then(res => {-->
<!--                return res.json();-->
<!--            }).then(res => {-->
<!--                if (res.success == false) {-->
<!--                    alert("Captcha is not vaild");-->
<!--                    return;-->
<!--                }-->
<!--            }).catch(err => {-->
<!--                console.log(err)-->
<!--            })-->
<!--        }-->
<!--        // let captcha = document.createElement("input");-->
<!--        // captcha.type = "hidden";-->
<!--        // captcha.name = "google_recaptcha_token";-->
<!--        // captcha.value = grecaptcha.getResponse();-->
<!--        // form.appendChild(captcha);-->
<!--        form.submit();-->
<!--        // inputs.forEach(input => {-->
<!--        //     // console.log(input.name, input.value)-->
<!--        //     data.append(input.name, input.value)-->
<!--        // });-->
<!--        // fetch("/account/login_confirm", {-->
<!--        //     method: 'POST',-->
<!--        //     body: form,-->
<!--        // });-->
<!--    })-->
<!--</script>-->
    </div>
</div>

<!--        <script type="text/javascript">-->


<!--            function sendMessage()-->
<!--            {-->
<!--                var emailAd=document.getElementById("emailAd");-->
<!--                if(emailAd.value=="")-->
<!--                {-->
<!--                    alert("邮箱不能为空");-->
<!--                    return ;-->
<!--                }-->
<!--                var email_reg=/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;-->
<!--                if(!email_reg.test(emailAd.value))-->
<!--                {-->
<!--                    alert("请输入正确的邮箱地址");-->
<!--                    return ;-->
<!--                }-->
<!--                $.get("/getCode",{"email":emailAd.value},function (data) {-->
<!--                    if(data.success)-->
<!--                    {-->
<!--                        var wait = 60;-->
<!--                        var button=document.getElementById("sendCode");-->
<!--                        (function time(o) {-->
<!--                            if (wait == 0) {-->
<!--                                o.disabled=false;-->
<!--                                o.innerHTML = "免费获取验证码";-->
<!--                                wait = 60;-->
<!--                            } else {-->
<!--                                o.disabled=true;-->
<!--                                o.innerHTML = wait + "秒后可以重新发送";-->
<!--                                wait&#45;&#45;;-->
<!--                                setTimeout(function() {-->
<!--                                    time(o)-->
<!--                                }, 1000)-->
<!--                            }-->
<!--                        })(button);-->
<!--                    }-->
<!--                });-->
<!--            }-->

<!--            function tologin()-->
<!--            {-->
<!--                var email=document.getElementById("email");-->
<!--                var code=document.getElementById("code");-->
<!--                if(code.value=="")-->
<!--                {-->
<!--                    alert("验证码不能为空");-->
<!--                    return ;-->
<!--                }-->
<!--                $.get("/tologin",{"email":email.value,"code":code.value},function (data) {-->
<!--                    if (data){-->
<!--                        window.location.href = "/catalog/main";-->
<!--                    }-->
<!--                });-->
<!--            }-->
<!--        </script>-->

</body>
</html>